<template>
	<view class="">
		<view class="first-comment-list u-flex u-col-top" v-for="(item1,index1) in commentList" :key="item1.id">
			<view class="first-comment-photo">
				<image :src="item1.logo.slice(0,4) == 'http'?item1.logo:$baseUrl + item1.logo" mode="aspectFill"></image>
			</view>
			<view class="first-comment-right u-flex-1">
				<view class="first-head-right">
					<view class="first-comment-nickname">
						{{item1.nickname || '昵称'}}
					</view>
				</view>
				<view class="first-comment-centent">
					{{item1.comments}}
				</view>
				<view class="reply-time-warp">
					{{$u.timeFormat(item1._createtime, 'yyyy-mm-dd hh:MM')}}
					<text class="reply-btn" @click="reply(item1.id)">回复</text>
					<text class="del-reply-btn" @click="delReply(item1.id)" v-if="_creatememid == item1._creatememid">删除</text>
				</view>
				<view class="second-comment-wrap u-flex-1" v-show="item1.children.length > 0">
					<block v-for="(item2,index2) in item1.children.slice(0,2)" :key="item2.id">
						<view class="second-comment-li">
							<text class="second-comment-nickname" style="color: #0146a3;">{{item2.nickname || "昵称"}}:</text>
							{{item2.comments}}
						</view>
					</block>
					<!-- <view class="second-comment-li">
						<text class="second-comment-nickname" style="color: #0146a3;">正义vvvv：</text>
						社会会淘汰一批人，弱肉强食适者生存，每个人都结婚不可能
					</view> -->
					<view class="second-comment-num" v-if="item1.children.length > 2" @click="commentAll(item1.id,item1.children)">
						全部{{item1.children.length}}条评论<u-icon name="arrow-right" size="26rpx" color="#0146a3"></u-icon>
					</view>
				</view>
			</view>
			
		</view>
		<!-- 评论弹窗 -->
		<u-popup v-model="commentShow" mode="bottom">
			<view class="popup">
				<view class="popup-close" @click="close()">
					<u-icon name="close" size="30" class="popup-close-icon  u-flex u-col-bottom  u-row-center"></u-icon>
				</view>
				<scroll-view scroll-y="true" class="popup-scroll">
					<view class="second-comment-item u-flex u-col-top" v-for="(item1,index1) in secondCommentList" :key="item1.id">
						<view class="second-comment-photo">
							<image :src="item1.logo.slice(0,4) == 'http'?item1.logo:$baseUrl + item1.logo" mode="widthFix"></image>
						</view>
						<view class="second-comment-right">
							<view class="second-head-right">
								<view class="second-comment-nickname">
									{{item1.nickname || '昵称'}}
								</view>
							</view>
							<view class="second-comment-centent">
								{{item1.comments}}
							</view>
							<view class="reply-time-warp">
								{{$u.timeFormat(item1._createtime, 'yyyy-mm-dd hh:MM')}}
								<text class="del-reply-btn" @click="delReply(item1.id)" v-if="_creatememid == item1._creatememid">删除</text>
							</view>
						</view>
					</view>
				</scroll-view>
				<!-- <second-comment @toggleMask="toggleMask2('show')" :secondCommentTotal="(secondCommentList.length)"></second-comment> -->
			</view>
		</u-popup>
	</view>
	
</template>

<script>
	export default{
		props:{
			commentList:{
				type:Array,
				default:[]
			},
			commentShow:{
				type:Boolean,
				default:false
			}
		},
		data(){
			return{
				_creatememid:"",
				$baseUrl:"",
				secondCommentList:[]
			}
		},
		created() {
			this.$baseUrl = this.baseUrl
			if(this.$store.state.userIn){
				this._creatememid = JSON.parse(this.$store.state.userIn).id
			}
		},
		methods:{
			commentAll(fromID,secondCommentList){
				this.secondCommentList = secondCommentList
				this.$emit('commentAll',fromID,secondCommentList)
			},
			reply(fromID){
				this.$emit('reply',fromID)
			},
			delReply(commentID){
				this.$emit('delReply',commentID)
			},
			close(){
				this.$emit('close')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.first-comment-list{
		margin-bottom: 64rpx;
		.first-comment-photo{
			margin-right: 14rpx;
			width: 40rpx;
			height: 40rpx;
			image{
				width: 40rpx;
				height: 40rpx;
				border-radius: 100%;
			}
		}
		.first-comment-right{
			.first-head-right{
				.first-comment-nickname{
					font-size: 22rpx;
					color: #999;
				}
			}
			.first-comment-centent{
				font-size: 26rpx;
			}
			.reply-time-warp{
				font-size: 22rpx;
				padding: 26rpx 0;
				color: #999;
				.reply-btn{
					display: inline-block;
					margin-left:26rpx;
					color: #000;
				}
				.del-reply-btn{
					display: inline-block;
					margin-left: 300rpx;
				}
			}
			.second-comment-wrap{
				margin-bottom: 58rpx;
				background-color: #f7f7f7;
				border-radius: 18rpx;
				padding: 20rpx;
				overflow: hidden;
				line-height: 40rpx;
				font-size: 26rpx;
				.second-comment-li{
					width: 100%;
				}
				.second-comment-num{
					color: #0146a3;
				}
			}
		}
		
	}
	.popup{
		width: 100%;
		height: 100vh;
		.popup-close{
			position: sticky;
			top: 0rpx;
			z-index: 10;
			background-color: #fff;
			width: 100%;
			height: 130rpx;
			border-bottom: 1px solid #e5e5e5;
			.popup-close-icon{
				margin-top: 50rpx;
				margin-left: 10rpx;
				width: 80rpx;
				height: 80rpx;
			}
		}
		.popup-scroll{
			padding-bottom: 104rpx;
			.second-comment-item{
				padding: 30rpx;
				.second-comment-photo{
					margin-right: 14rpx;
					image{
						width: 40rpx;
						height: 40rpx;
						border-radius: 100%;
					}
				}
				.second-comment-right{
					width: 100%;
					.second-head-right{
						display: flex;
						justify-content: space-between;
						width: 100%;
						.second-comment-nickname{
							font-size: 22rpx;
							color: #999;
						}
					}
					.second-comment-centent{
						font-size: 26rpx;
					}
					.reply-time-warp{
						font-size: 22rpx;
						padding: 26rpx 0;
						color: #999;
						.del-reply-btn{
							display: inline-block;
							margin-left: 300rpx;
						}
					}
				}
			}
		}
	}
</style>
